{include file="public/head"/}
<div class="container-fluid">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info" id="headeralert">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>


    <div class="ntDesktop">
        <div class="ntDesktop-head">{:strtoupper(lang('bank'))}</div>

        <div class="row clearfix" style="padding-top:0px">
            <div class="col-md-12 column text-right">
                <div>
                    {in name="60" value="$Think.session.admin.auth_ids"}
                    <a href="/admin/prefecture/banksadd" class='btn btn-primary' data-toggle="modal"
                       data-target="#banks_editModal" stytle="margin-right:20px"> <span
                            class="glyphicon glyphicon-plus"></span>{:strtoupper(lang('add_new_bank'))} </a>
                    {/in}
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <th>{:strtoupper(lang('country'))} </th>
                        <th> {:strtoupper(lang('bank_name'))}</th>
                        <th>{:strtoupper(lang('abbreviation'))} </th>
                        <th>{:strtoupper(lang('code'))} </th>
                        <th> {:strtoupper(lang('operate'))}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id" v-if="list.length>0">
                        <td> {{item.countryname}}</td>
                        <td> {{item.name}}</td>
                        <td>{{item.shortname}}</td>
                        <td>{{item.code}}</td>
                        <td class="text-right">
                            <div>
                                {in name="108" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/prefecture/banksedit?id='+item.id"
                                   class='btn btn-sm btn-primary' data-toggle="modal"
                                   data-target="#banks_editModal"><span class="glyphicon glyphicon-pencil"></span>{:strtoupper(lang('edit'))}</a>
                                {/in}

                                {in name="109" value="$Think.session.admin.auth_ids"}
                                <a href="javascript:;" @click.prevent="delbanks(item.id,item.name)"
                                   class='btn btn-sm btn-default'><span class="glyphicon glyphicon-trash"></span> {:strtoupper(lang('delete'))}</a>
                                {/in}
                            </div>
                        </td>
                    </tr>
                    <tr style="text-align: center;" v-if="list.length==0">
                        <td colspan="5" class="no_date">{:strtoupper(lang('no_data'))}</td>
                    </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation" class="navbox" v-show="list.length!=0">
                    <ul class="pagination"></ul>
                </nav>
            </div>
        </div>


    </div>
</div>
<!--添加弹窗部分 开始-->
<div class="modal fade" id="banks_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
{include file="public/foot"/}
<script>
    var table = new Vue({
        el: '.ntDesktop',
        data: {
            list: [],
            page: 1,
            pageSize: 30,
        },
        methods: {
            setPage(pageCurrent, pageSum) {
            //数据总条数
            var myPageCount = pageSum;
            //一页显示多少条
            var myPageSize = this.pageSize;
            //总页数
            var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
            $.jqPaginator('.pagination', {
                totalPages: parseInt(countindex),
                //最多显示多少页
                visiblePages: 5,
                //默认显示第几页
                currentPage: pageCurrent,
                first: '<li class="first"><a href="javascript:;">'+langcon.page_home+'</a></li>',
                prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>'+langcon.previous_page+'</a></li>',
                next: '<li class="next"><a href="javascript:;">'+langcon.next_page+'<i class="arrow arrow3"></i></a></li>',
                last: '<li class="last"><a href="javascript:;">'+langcon.last_page+'</a></li>',
                page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                all:'<li class="page"><a href="javascript:;">'+myPageCount+' / '+this.page+'PG , '+this.pageSize+' /PG</a></li>',
                onPageChange:(num, type)=>{
                    if (type == "change") {
                        this.page=num
                        this.getAllList()
                    }
                }});
            },
            //数据所有获取
            getAllList(){
                $('.loding').show()
                $.ajax({
                    url: "/admin/prefecture/banks",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.getbanks;
                        if(result.size)
                        this.setPage(parseInt(this.page), result.size)
                        $('.loding').hide()
                    }
                })
            },
            delbanks(id, name){
                $.ajax({
                    url: '/admin/prefecture/banksdel',
                    data: {
                        id,
                        name
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (res) => {
                        change_mes_type('#headeralert',res.status)
                        $('#headeralert').show()
                        $('#headeralert p').html('*' + res.msg + '<br>')
                        if(res.status==1){
                            if (!(this.list.length - 1)) {
                                if(this.page>1){
                                    this.page--
                                }
                            }
                            this.getAllList()
                        }
                    }
                });
            }
        },
        created(){
            this.getAllList()
            $('#banks_editModal').on('hide.bs.modal', () => {
                if(localStorage.getItem("model")){
                    this.getAllList()
                localStorage.removeItem("model");
            } 
            })
        }
    })
    //替换之前的模板
    $("#banks_editModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
</script>